<template>
  <div class="tabbar" v-show="!this.$route.meta.isTabBar">
    <van-tabbar v-model="active" active-color="#FF8B57" inactive-color="#A0A3A6">
      <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.name)">
        <span>{{item.title}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import URL from 'url'
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "/articleList",
          title: "文字",
          normal: "",
          active: ""
        },
        {
          name: "/movieList",
          title: "电影",
          normal: "",
          active: ""
        },
        {
          name: "/center",
          title: "我的",
          normal: "",
          active: ""
        }
      ]
    };
  },
  methods: {},
  // 通过路由跳转判断选中的样式
  //这一段会遇到一个问题，如果用的是vue-router写的，会获取不到$route的值，这段不写，发现也是可以实现基本的功能的。
  created() {
    var url = window.location.href;
    var basename = URL.parse(url);
    console.log(basename.pathname);
    if (basename.pathname == "/articleList") {
      this.active = 0;
    } else if (basename.pathname == "/movieList") {
      this.active = 1;
    } else if (basename.pathname == "/center") {
      this.active = 2;
    }
  }
};
</script>

<style>
.van-tabbar {
  width: 750px !important;
  left: 50% !important;
  transform: translateX(-50%)!important;
  border-top: 1px solid #f5f5f5;
  height: 100px !important;
}
.van-tabbar-item__icon>img{
  width: 50px;
  height: 50px !important;
}
</style>
